<template>
  <!-- 弹窗封装,需要自己再手动调试 -->
  <div>
    <el-dialog
      :title="dialogConfigForm.title"
      :visible.sync="showConfig.visible"
      :before-close="onCancel"
      append-to-body
      :close-on-click-modal="false"
      :width="dialogConfigForm.diagoWidth"
      @closed="closeClearData"
    >
      <BasicForm
        ref="dialogBasicForm"
        :form="dialogConfigForm.config"
        :title="dialogConfigForm.title"
        :up-data-type="upDataType"
        @onEmitFormRef="onEmitFormRef"
      />

      <div v-if="dialogConfigForm.footer" slot="footer" class="dialog-footer-buttons">
        <el-button v-if="dialogConfigForm.footer.cancel" ref="cancel" size="small" @click="onCancel">取 消</el-button>
        <el-button v-if="dialogConfigForm.footer.submit" type="primary" size="small" @click.stop="onSubmit">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import BasicForm from "@/common/BasicForm";
  import {
    EnumModalContentType
  } from "@/common/BasicList/utils/static";
  import {
    isFunction
  } from "@/common/BasicList/utils";
  export default {

    components: {
      BasicForm
    },
    // inject: ["reload"],  // 弹窗更新
    props: {
      dialogConfigForm: {
        type: Object,
        "default": () => {
          return {}
        }
      },
      current: {
        type: Object,
        "default": function() {
          return {

          }
        }
      },
      showConfig: {
        type: Object,
        "default": function() {
          return {
            visible: false
          }
        }
      }
    },
    data() {
      return {
        EnumModalContentType,
        count: 0,
        upDataType: false,
        BasicFormRef: null
      }
    },
    watch: {
      "showConfig.visible": {
        handler: function(newVal, oldVal) {
          if (this.BasicFormRef) {
            this.BasicFormRef.clearValidate()
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      closeClearData() {
        if (this.dialogConfigForm && this.dialogConfigForm.closeClearData == true) {
          this.$refs.dialogBasicForm && this.$refs.dialogBasicForm.clearInitData()
        }
      },
      onEmitFormRef(ref) {
        this.BasicFormRef = ref;
      },
      closeDialog() {
        this.showConfig.visible = false
      },
      // 暂时没用上
      openDialog() {
        this.showConfig.visible = true
      },
      async onSubmit() {
        if (this.BasicFormRef) {
          // 校验参数
          this.BasicFormRef.validate(async(valid) => {
            if (valid != true) {
              this.$message.warning("请完善数据")
              return false;
            } else {
              const {
                beforeValid,
                onSubmit
              } = this.dialogConfigForm;
              const next = isFunction(beforeValid) ? await beforeValid(this) : true;
              if (next) {
                const form = JSON.parse(JSON.stringify(this.dialogConfigForm.config.form));
                isFunction(onSubmit) && await onSubmit(form, this.closeDialog, this.resetForm, this.$refs
                  .dialogBasicForm &&
                  this.$refs.dialogBasicForm.allUploadFinish());
              }
            }
          });
        } else {
          this.$message.warning("请完善数据")
        }
      },

      onCancel() {
        const next = isFunction(this.dialogConfigForm.onCancel) ? this.dialogConfigForm.onCancel(this
            .closeDialog, this.$refs.dialogBasicForm && this.$refs.dialogBasicForm.allUploadFinish())
          : true;
        if (next == true) {
          this.closeDialog()
        }
      },

      resetForm() {
        this.upDataType = true;
        this.BasicFormRef.resetFields();
      }
    }
  }

</script>

<style scoped lang="scss">

</style>
